<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>设备分布地图</title>
    <!-- 新增光圈样式 -->
    <style>
        /* 新增匀速旋转动画 */
        @keyframes rotate-animation {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes pulse-effect-animation {
            0% {
                opacity: 0.4;
                transform: translate(-50%, -50%) scale(0.9);
                /* 移除旋转属性 */
                border-color: #0059ffcc;
            }

            50% {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(1.1);
                /* 移除旋转属性 */
                border-color: rgba(0, 217, 255, 0.3);
            }

            100% {
                opacity: 0.4;
                transform: translate(-50%, -50%) scale(0.9);
                /* 移除旋转属性 */
                border-color: #ff2600cc;
            }
        }

        .pulse-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            /* 改为百分比单位 */
            height: 100%;
            /* 改为百分比单位 */
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle,
                    #0051fffb 0%,
                    #03030333 50%,
                    transparent 100%);
            animation:
                pulse-effect-animation 5s ease-in-out infinite,
                rotate-animation 50s linear infinite;
            /* 新增独立旋转动画 */
            /* 替换为整合动画 */
            pointer-events: none;
            z-index: 1;
            /* filter: blur(10px); */
            /* 减少模糊度 */
        }

        .pulse-effect::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 95%;
            height: 95%;
            border: 3px dashed rgba(0, 255, 255, 0.9);
            /* 改为科技蓝 */
            border-radius: 50%;
            transform: translate(-50%, -50%);
            filter: none;
            z-index: 2;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
            /* 同步修改阴影颜色 */
        }

        /* 新增iframe适配样式 */
        html,
        body {
            width: 100%;
            height: 100%;
            /* 隐藏全局滚动条 */
            margin: 0;
            padding: 0;
        }

        /* 新增地图容器样式 */
        #map {
            background: transparent !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute;
            /* 改为绝对定位 */
            top: 0;
            left: 0;
        }

        #map canvas {
            background: transparent !important;
        }
    </style>
    <!-- 修改echarts加载顺序 -->
    <script src="js/echarts-5.4.3.min.js"></script>
    <script src="geo/100000.json"></script>
    <script src="geo/320000.json"></script>
    <script src="geo/320100.json"></script>


<body>
    <div id="back-btn"
        style="position: absolute; top: 20px; left: 20px; z-index: 1000; display: none; background: rgba(0,0,0,0.5); border-radius: 4px;">
        <button onclick="goBack()" style="margin:5px;">返回上级</button>
    </div>
    <!-- 修正地图容器结构 -->
    <div id="map" style="width: 100%; height: 100vh; position: relative; background: transparent;"
        ondblclick="toggleColorEditor()">
        <!-- <div class="pulse-effect"></div> -->
    </div>
    <div id="color-editor" style="position: absolute; top: 20px; right: 20px; z-index: 1000; 
            background: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px;
            cursor: pointer; display: none /* 添加指针样式 */">
        <h3 style="color:#fff; margin:0 0 10px 0;">地图配色设置</h3>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;">
            <div>
                <label style="color: #fff;">基础色</label>
                <input type="color" data-color="base" value="#103a77" style="width:100%; margin-top:5px;">
            </div>
            <div>
                <label style="color: #fff;">高亮色</label>
                <input type="color" data-color="highlight" value="#0097ff" style="width:100%; margin-top:5px;">
            </div>
        </div>
        <button id="save-colors" style="margin-top:10px; width:100%; padding:5px;
            background: #1890ff; color: white; border: none; border-radius:3px;">
            保存配置
        </button>
        <!-- <button onclick="toggleColorMode()" style="margin-top:10px; width:100%; padding:5px;
            background: #1890ff; color: white; border: none; border-radius:3px;">
    切换纹理/纯色模式 -->
        </button>
    </div>
</body>
<script>
    // 在全局常量区域添加
    const SERVER_IP = '192.168.30.191';  // 新增IP常量

    const API_BASE = `http://${SERVER_IP}:1888/api/yt-business/ipRegion`;
    const DETAIL_PAGE_URL = `http://${SERVER_IP}:1889/#/view/1935230594766155777`;
    const DEVICE_ACTION = {
        method: "打开单体设备",
        model: "远程移动设备"
    };
    const includJD = false; // 是否包含海南诸岛与九段线
    const includJDPic = true; // 是否包含海南诸岛与九段线 图片
    const needPulseEffect = false; // 是否开启光圈效果
    let useSolidColor = true; // 新增纯色模式开关
    const MAP_SIZE_RATIO = 1.2; // 1.0为原始尺寸
    const ANIMATION_INTERVAL = 100; // 新增动画速度全局变量

    // // 在初始化地图后添加动画定时器
    let gradientOffset = 0
    let animationInterval; // 声明定时器变量


    // 新增全局颜色配置
    let AREA_COLORS = {
        base: 'rgba(16, 58, 119, 0.8)',       // 基础区域色
        highlight: 'rgba(0, 151, 255, 0.9)',  // 高亮区域色
        border: '#71e7fd',  // 改为纯色高亮青
        gradient: 'rgba(80, 130, 200, 0.9)'   // 渐变色
    };

    // 当前地图的所有区域名称与adcode的映射关系
    let nameAdcodeMap = new Map();
    let geoCoordMap = {};
    let historyStack = []; // 添加层级历史栈
    let currentLevel = 'province'; // 当前层级：province/city/district
    let currentArea = '100000';         // 当前选中区域
    const mapContainer = document.getElementById('map');
    let chart = echarts.init(mapContainer, null, {
        renderer: 'canvas', // 强制使用Canvas渲染
        useDirtyRect: false // 关闭脏矩形优化
    });
    if (needPulseEffect) {
        const pulse = document.createElement('div');
        pulse.className = 'pulse-effect';
        // 找到zr_0 canvas元素
        const canvas = document.querySelector('#map canvas[data-zr-dom-id="zr_0"]');
        // 在canvas前插入脉冲效果
        mapContainer.firstChild.insertBefore(pulse, canvas);

    }
    // 在颜色编辑器初始化代码后添加
    function toggleColorEditor() {
        const editor = document.getElementById('color-editor');
        editor.style.display = editor.style.display === 'none' ? 'block' : 'none';
    }
    updatePulseSize();
    function updatePulseSize() {
        if (needPulseEffect) {
            const pulse = document.querySelector('.pulse-effect');
            const mapRect = mapContainer.getBoundingClientRect();
            const size = Math.max(mapRect.width, mapRect.height) * 0.4; // 取容器尺寸的80%
            pulse.style.width = `${size}px`;
            pulse.style.height = `${size}px`;
        }
    }
    window.echartsJsonAdapter = {
        '100000': window.chinaJson,  // 中国地图代码
        '320000': window.jiangsuJson,   // 江苏地图代码
        '320100': window.nanjingJson   // 南京地图代码
    };



    // 添加返回功能
    function goBack() {
        if (historyStack.length > 1) {
            historyStack.pop(); // 移除当前层级
            const prevAdcode = historyStack.pop();
            currentLevel = getLevelByAdcode(prevAdcode);
            currentArea = prevAdcode; // 新增这行
            // console.log("goBack ... prevAdcode >> " + prevAdcode + " " + "currentLevel >> " + currentLevel)
            chart.setOption({ series: [{ data: [] }] }, true);
            initMap(prevAdcode);
        }
    }

    // 获取行政编码对应的层级
    function getLevelByAdcode(adcode) {
        const codeStr = String(adcode);
        // 修正省级判断逻辑
        if (codeStr.endsWith('0000')) {
            return codeStr === '100000' ? 'province' : 'city';
        }
        return 'district';
    }

    function updateBackButton() {
        const btn = document.getElementById('back-btn');
        btn.style.display = historyStack.length > 1 ? 'block' : 'none';
    }



    async function registerMap(geoName) {
        // 添加数据格式验证
        let geoKey = String(geoName);
        let rawData = window.echartsJsonAdapter[geoKey];
        if (!rawData || !rawData.features) {
            const response = await fetch(`${API_BASE}/geo?geoKey=${geoName}`);
            const result = await response.json();
            rawData = JSON.parse(result.data);
        }

        // 中文名称映射行政编码
        nameAdcodeMap = rawData.features.reduce((acc, cur) => {
            const { name, adcode } = cur.properties;
            acc[name] = adcode; // 中文名称映射行政编码
            return acc;
        }, {});

        // 转换为标准地图格式
        let mapData = {
            type: "FeatureCollection",
            features: rawData.features
                .map(f => {
                    // 新增海南几何处理
                    if (includJD === false && String(f.properties.adcode) === '460000') {
                        return {
                            ...f,
                            geometry: {
                                ...f.geometry,
                                coordinates: f.geometry.coordinates.slice(0, 1) // 保留第一个坐标组
                            }
                        };
                    }
                    return f;
                })
                .map(f => ({
                    type: "Feature",
                    properties: {
                        name: f.properties.name,
                        adcode: f.properties.adcode || geoName,
                        center: f.properties.center
                    },
                    geometry: f.geometry
                }))
                // 新增过滤条件
                .filter(f => !(includJD === false && geoKey === '100000' && String(f.properties.adcode) === '100000_JD'))
        };

        rawData.features.forEach(f => {
            geoCoordMap[f.properties.name] = f.properties.center; // 使用geoJSON中的中心点
        });
        echarts.registerMap(geoKey, mapData);
        // 在返回对象中添加缺失的属性
        return {
            mapName: geoKey,
            points: [], // 需要从数据源获取实际值
            center: rawData.properties?.center || [116.4074, 39.9042] // 示例默认中心坐标
        };
    }


    // 初始化地图
    // 修改初始化函数
    async function initMap(geoName) {
        // 清除旧的事件监听器
        chart.off('click');
        // 新增历史记录比对
        if (historyStack.length == 0 || historyStack[historyStack.length - 1] !== geoName) {
            historyStack.push(geoName);
            updateBackButton();
        }

        const geoData = await registerMap(geoName);
        // 修改1：添加数据加载状态检查
        if (!echarts.getMap(geoData.mapName)) {
            console.error('地图数据未正确注册:', geoData.mapName);
            return;
        }

        // 修改2：强制重新渲染
        chart.clear();
        points = geoData.points;
        currentArea = geoData.mapName;
        chart.setOption({
            // 设置全局背景色
            // backgroundColor: '#f0f8ff', // 浅蓝色背景
            // backgroundColor: '#000', // 浅蓝色背景
            // backgroundColor: 'transparent',// 设置全局背景色为透明
            graphic: [{
                type: 'image',
                id: 'nine-dash-line',
                right: '3%',  // 微调百分比位置
                bottom: '3%',
                z: 100,
                style: {
                    image: 'img/nine-dash-line.png',
                    opacity: 0.8,
                    // 添加最小尺寸限制
                    width: 227.75,  // 最小宽度100px
                    height: 227.75   // 最小高度100px
                }
            }, {
                type: 'rect',
                id: 'nine-dash-border',  // 新增边框元素ID
                right: '3%',
                bottom: '3%',
                z: 99,
                shape: {
                    // 添加最小尺寸限制
                    width: 227.75,  // 对应图片最小宽度+6
                    height: 227.75   // 对应图片最小高度+6
                },
                style: {
                    stroke: 'rgba(0,0,0,0.8)',
                    lineDash: [5, 5],
                    fill: null
                }
            }],
            // 或设置背景图片
            /* backgroundColor: {
                image: 'https://example.com/path/to/image.jpg',
                repeat: 'no-repeat'
            }, */
            visualMap: { // 移动到顶层
                show: false, // 添加该属性隐藏图例
                type: 'piecewise',
                pieces: [
                    { value: 'online', color: '#52c41a' },
                    { value: 'offline', color: '#ff4d4f' }
                ]
            },
            series: [{
                type: 'map',
                roam: false,  // 禁用所有交互包括缩放和平移
                progressive: 400, // 增量渲染阈值
                progressiveThreshold: 2000, // 启用渐进式渲染
                map: currentArea,
                data: points,
                // 必须配置以下参数
                // 修改布局配置
                layoutCenter: ['50%', '50%'], // 使用geoJSON中的center
                layoutSize: `${(currentArea === '100000' ? MAP_SIZE_RATIO : 0.8 * MAP_SIZE_RATIO) * 100}%`,
                nameProperty: 'name',
                selectedMode: 'single',
                emphasis: { label: { show: true } },
                // 设置地图区域背景
                itemStyle: {
                    areaColor: useSolidColor ? AREA_COLORS.base : {  // 根据开关状态切换
                        image: './img/map-texture.png',
                        repeat: 'repeat'
                    },
                    borderColor: AREA_COLORS.border, // 调整为深科技蓝
                    borderWidth: 2,  // 加粗边框宽度
                    shadowBlur: 10,  // 新增阴影效果
                    shadowColor: AREA_COLORS.border // 新增阴影颜色
                },
                emphasis: {
                    itemStyle: {
                        areaColor: AREA_COLORS.highlight, // 高亮青蓝色
                        borderColor: AREA_COLORS.border,
                        borderWidth: 3,
                        shadowColor: AREA_COLORS.border,
                        shadowBlur: 15
                    }
                },
                label: {
                    show: true,
                    fontSize: 14,
                    color: '#fff',  // 从#000改为白色
                    formatter: (params) => {
                        return `${params.name}`;
                    }
                }
            }]
        });
        toggleNineDashLine(!includJD && includJDPic)
        // 下钻事件处理
        chart.on('click', async (params) => {
            try {
                // 新增层级判断
                // 修改为安全的方式输出参数
                console.log("点击事件参数:", {
                    name: params.name,
                    seriesType: params.seriesType,
                    componentType: params.componentType
                });
                // 新增散点点击处理
                if (params.componentType === 'series' && params.seriesType === 'effectScatter') {
                    const devices = params.data?.devices || [];
                    if (devices.length > 0) {
                        // 通过父窗口跳转
                        parent.location.href = DETAIL_PAGE_URL;
                        let valueStr = DEVICE_ACTION;
                        console.log('传值给insight数据' + valueStr);
                        //自定义
                        if (window.vuplex) window.vuplex.postMessage(valueStr);
                        window.parent.postMessage(JSON.parse(JSON.stringify(valueStr)), "*");
                        // alert(`点击设备：\n${devices.map(d =>
                        //     `ID: ${d.deviceId}\n状态: ${d.status}`
                        // ).join('\n--------\n')}`);
                    }
                    return; // 处理完散点点击后直接返回
                }
                // 原有的下钻逻辑
                if (params.componentType === 'series' &&
                    (params.seriesType === 'map' || params.seriesType === 'effectScatter')) {                    // 清空旧数据防止残留
                    let adcode = String(nameAdcodeMap[params.name]); // 江苏省adcode

                    chart.setOption({ series: [{ data: [] }] }, true);
                    // 添加加载状态提示
                    chart.showLoading();

                    // 下钻更新数据层级
                    if (currentLevel === 'province') {
                        currentLevel = 'city';
                        currentArea = adcode;
                        console.log("click1 ... adcode >> " + adcode + " " + "currentLevel >> " + currentLevel)
                        await initMap(adcode);
                    } else if (currentLevel === 'city') {
                        currentLevel = 'district';
                        currentArea = adcode;
                        console.log("click2 ... adcode >> " + adcode + " " + "currentLevel >> " + currentLevel)
                        await initMap(adcode);
                    } else {
                        await initMap(adcode);
                    }

                }
            } catch (e) {
                console.error('地图加载失败:', e);
            } finally {
                chart.hideLoading();
            }
        });



        // 修改动画控制逻辑
        if (animationInterval) {
            clearInterval(animationInterval);
            animationInterval = null;
        }

        if (useSolidColor) {
            animationInterval = setInterval(() => {
                gradientOffset = (gradientOffset + 0.03) % 1;
                chart.setOption({
                    series: [{
                        itemStyle: {
                            areaColor: AREA_COLORS.base,
                            borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: Math.max(0, gradientOffset - 0.1), color: 'rgba(80, 130, 200, 0)' },
                                { offset: gradientOffset, color: AREA_COLORS.gradient },
                                { offset: Math.min(1, gradientOffset + 0.1), color: 'rgba(80, 130, 200, 0)' }
                            ])
                        }
                    }]
                });
            }, ANIMATION_INTERVAL);
        }

        // 删除旧的鼠标事件监听
        chart.off('mouseover');
        chart.off('mouseout');

        if (useSolidColor) {
            // 添加新的鼠标事件监听
            chart.on('mouseover', 'series', () => clearInterval(animationInterval));
            chart.on('mouseout', 'series', () => animationInterval = setInterval(() => {
                gradientOffset = (gradientOffset + 0.03) % 1;
                chart.setOption({
                    series: [{
                        itemStyle: {
                            areaColor: AREA_COLORS.base,
                            borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: Math.max(0, gradientOffset - 0.1), color: 'rgba(80, 130, 200, 0)' },
                                { offset: gradientOffset, color: AREA_COLORS.gradient },
                                { offset: Math.min(1, gradientOffset + 0.1), color: 'rgba(80, 130, 200, 0)' }
                            ])
                        }
                    }]
                });
            }, ANIMATION_INTERVAL));
        }
        console.log("======= " + currentArea + "  " + `${(currentArea === '100000' ? MAP_SIZE_RATIO : 0.8 * MAP_SIZE_RATIO) * 100}%`)
    }
    // 定时获取设备状态
    setInterval(async () => {
        const res = await fetch(`${API_BASE}/deviceStatus`);
        const { data } = await res.json();
        // const geoCoordMap = {
        //     '江宁区': [118.8397, 31.9536],
        //     '玄武区': [118.7979, 32.0486],
        //     // ...其他区县坐标...
        // };

        // const { data } = {
        //     "code": 200,
        //     "success": true,
        //     "data": [
        //         {
        //             "ip": "114.222.231.233",
        //             "time": "1750404881147",
        //             "region": "亚洲|中国|江苏省|南京市|江宁区|中国电信",
        //             "deviceId": "222",
        //             "status": "online"
        //         },
        //         {
        //             "ip": "221.235.197.46",
        //             "time": "1750392500557",
        //             "region": "亚洲|中国|江苏省|南京市|江宁区|中国电信",
        //             "deviceId": "111",
        //             "status": "offline"
        //         }
        //     ],
        //     "msg": "操作成功",
        //     "localeCode": null
        // };

        // 新增基于nameAdcodeMap的过滤逻辑
        const nameAdcodeKeys = Object.keys(nameAdcodeMap);
        const filteredData = data.filter(item => {
            const regionParts = item.region.split('|');
            return regionParts.some(part => nameAdcodeKeys.includes(part));
        })


        // 按区域聚合数据
        const regionMap = filteredData.reduce((acc, item) => {
            const [, , province, city, district] = item.region.split('|');
            const regionName = currentLevel === 'province' ? province :
                currentLevel === 'city' ? city : district;

            if (!acc[regionName]) {
                acc[regionName] = {
                    total: 0,
                    online: 0,
                    offline: 0
                };
            }
            acc[regionName].total++;
            item.status === 'online' ? acc[regionName].online++ : acc[regionName].offline++;
            return acc;
        }, {});

        const points = Object.entries(regionMap).map(([name, stats]) => ({
            name,
            value: stats.online > 0 ? 1 : 0, // 只要有在线设备就高亮
            deviceCount: stats.total,
            online: stats.online,
            offline: stats.offline
        }));
        // console.log("geoCoordMap >> " + JSON.stringify(geoCoordMap))
        // 修正散点数据格式
        const scatterData = filteredData.map(item => {
            const [, , province, city, district] = item.region.split('|');
            // 直接从接口获取坐标
            const coord = Array.isArray(item.geoCoord) && item.geoCoord.length === 2
                ? item.geoCoord
                : [118.7674, 32.0415]; // 默认坐标

            return {
                name: district,
                value: [coord[0], coord[1], item.status === 'online' ? 1 : 0],
                devices: [{
                    deviceId: item.deviceId,
                    status: item.status
                }]
            };
        });

        // 按坐标聚合设备信息
        const coordMap = scatterData.reduce((acc, cur) => {
            const key = cur.value.slice(0, 2).join(',');  // 只取经纬度作为key
            if (!acc[key]) {
                acc[key] = {
                    ...cur,
                    value: [cur.value[0], cur.value[1], 0], // 初始化状态为离线
                    devices: []
                };
            }
            // 只要有在线设备则标记为在线
            if (cur.value[2] === 1) acc[key].value[2] = 1;
            acc[key].devices.push(...cur.devices);
            return acc;
        }, {});

        // 转换回数组格式
        const aggregatedScatter = Object.values(coordMap).map(point => ({
            ...point,
            deviceCount: point.devices.length
        }));


        chart.setOption({
            visualMap: { // 移动到顶层
                show: false, // 添加该属性隐藏图例
                type: 'piecewise',
                // 添加维度指定
                dimension: 2, // 对应散点数据中的第三个元素（状态值）
                pieces: [
                    { value: 1, label: '在线', color: '#52c41a' },
                    { value: 0, label: '离线', color: '#ff4d4f' }
                ]
                ,
                // 限制作用范围
                seriesIndex: [0] // 仅作用于地图系列
            },
            // 添加全局tooltip配置
            tooltip: {
                trigger: 'none',  // 全局禁用tooltip
                enterable: false,
                backgroundColor: 'rgba(187,96,42,0.7)',
                borderWidth: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 14  // 添加字体大小设置
                }
            },
            geo: {
                map: currentArea,
                roam: false, // 禁用地理坐标系缩放
                layoutCenter: ['50%', '50%'],
                layoutSize: `${(currentArea === '100000' ? MAP_SIZE_RATIO : 0.8 * MAP_SIZE_RATIO) * 100}%`,
                // 添加区域屏蔽配置
                silent: true  // 禁止geo元素响应鼠标事件
            },
            series: [{
                type: 'map',
                roam: false,  // 禁用所有交互包括缩放和平移
                map: currentArea,
                data: points,
                // 必须配置以下参数
                // 修改布局配置
                layoutCenter: ['50%', '50%'], // 使用geoJSON中的center
                layoutSize: `${(currentArea === '100000' ? MAP_SIZE_RATIO : 0.8 * MAP_SIZE_RATIO) * 100}%`,
                nameProperty: 'name',
                selectedMode: 'single',
                emphasis: { label: { show: true } },
                label: {
                    show: true,
                    fontSize: 14,
                    color: '#fff',  // 从#000改为白色
                    silent: false,  // 允许label触发事件
                    formatter: (params) => {
                        const dataItem = params.data || {};
                        return `${params.name}`;
                    }
                }
            }, // 新增散点系列
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: aggregatedScatter,
                symbol: 'image://img/device.png', // 新增图片路径
                symbolSize: 32, // 固定图片尺寸
                progressive: 200,  // 新增渐进式渲染
                blurSize: 3,       // 减小模糊尺寸
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: (params) => {
                        const devices = params.data?.devices || [];
                        return devices.map(d =>
                            `${params.data.name} - 设备ID: ${d.deviceId}  <span style="color:${d.status === 'online' ? '#52c41a' : '#ff4d4f'}">${d.status === 'online' ? '在线' : '离线'}</span>`
                        ).join('<hr style="margin:5px 0">') || '无设备信息';
                    }
                },
                symbolSize: (val) => Math.max(32, (val.data?.deviceCount || 0) * 20),
                emphasis: {  // 添加高亮配置
                    focus: 'self',
                    label: {
                        show: true,
                        position: 'top'
                    }
                },
                // 添加标签配置
                label: {
                    show: true,  // 改为true开启常显
                    position: 'top',  // 文本显示在散点上方
                    silent: false,  // 允许label触发事件
                    formatter: (params) => {
                        return `移动式智能修复设备`;  // 显示设备数量
                        // return `${params.data.deviceCount}台`;  // 显示设备数量
                    },
                    fontSize: 20,  // 调大字号
                    color: '#fff',  // 白色文字
                    backgroundColor: 'rgba(187, 96, 42, 0.7)',  // 修改为橙色半透
                    borderColor: '#ffa500',  // 新增橙色边框
                    borderWidth: 1,          // 边框宽度1像素
                    borderRadius: 4,
                    padding: [6, 8]
                },
                rippleEffect: {
                    period: 0,
                    brushType: 'stroke'
                },
                itemStyle: {
                    // color: '#52c41a', // 注释掉原有颜色
                    opacity: 0.9,  // 添加透明度
                    shadowBlur: 12
                },
                zlevel: 2  // 确保图层在上层
            }

            ]
        });// 添加true参数清空旧配置
        // 添加resize调用
        chart.resize();
    }, 2000);
    // 初始化调用方式
    // 新增异步初始化函数
    async function initColorConfig() {
        try {
            const response = await fetch(`${API_BASE}/getColors`);
            if (!response.ok) throw new Error('服务器无配置');
            const { data } = await response.json();
            // 新增：从data中获取模式状态
            useSolidColor = data.useSolidColor ?? useSolidColor;  // 新增这行
            // 修复：从data.colors获取颜色配置
            AREA_COLORS = {
                base: data.colors?.base || AREA_COLORS.base,
                highlight: data.colors?.highlight || AREA_COLORS.highlight,
                border: data.colors?.border || AREA_COLORS.border,
                gradient: data.colors?.gradient || AREA_COLORS.gradient
            };
            // 新增：更新颜色选择器值
            document.querySelector('[data-color="base"]').value = rgbToHex(AREA_COLORS.base);
            document.querySelector('[data-color="highlight"]').value = rgbToHex(AREA_COLORS.highlight);

            // 添加配置应用
            chart.setOption({
                series: [{
                    itemStyle: {
                        areaColor: useSolidColor ? AREA_COLORS.base : {  // 根据开关状态切换
                            image: './img/map-texture.png',
                            repeat: 'repeat'
                        },
                        borderColor: AREA_COLORS.border, // 调整为深科技蓝
                        borderWidth: 2,  // 加粗边框宽度
                        shadowBlur: 10,  // 新增阴影效果
                        shadowColor: AREA_COLORS.border // 新增阴影颜色
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: AREA_COLORS.highlight,
                            borderColor: AREA_COLORS.border, // 高亮边框更亮
                            borderWidth: 3,  // 加粗高亮边框
                            shadowColor: AREA_COLORS.border, // 增强阴影
                            shadowBlur: 15   // 增大阴影范围
                        }
                    }
                }]
            }, true);  // 添加true参数立即更新图表
        } catch (error) {
            console.log('使用本地配置:', error);
            const localConfig = JSON.parse(localStorage.getItem('areaColors'));
            if (localConfig) {
                useSolidColor = localConfig.useSolidColor ?? useSolidColor;  // 新增本地配置读取
                // 修复本地配置加载方式
                AREA_COLORS = {
                    base: localConfig.base || AREA_COLORS.base,
                    highlight: localConfig.highlight || AREA_COLORS.highlight,
                    border: localConfig.border || AREA_COLORS.border,
                    gradient: localConfig.gradient || AREA_COLORS.gradient
                };
            }
        }
    }
    // 原有地图初始化代码
    registerMap('100000').then(() => {
        // 在页面初始化时调用
        initColorConfig().then(() => {
            initMap('100000');
        });
    });


    // 添加窗口resize监听
    window.addEventListener('resize', () => {
        console.log('窗口宽度：', window.innerWidth);
        console.log('窗口高度：', window.innerHeight);
        // 动态计算图形尺寸（示例：窗口高度的15%，最小100px）
        const newHeightSize = Math.max(100, window.innerHeight * 0.25);
        const newWidthSize = Math.max(100, window.innerWidth * 0.25);
        const newSize = Math.min(newHeightSize, newWidthSize);
        console.log('newSize', newSize);
        chart.setOption({
            graphic: [{
                id: 'nine-dash-line',
                right: '3%',  // 保持相对位置
                bottom: '3%',
                style: {
                    width: newSize,
                    height: newSize
                }
            }, {
                right: '3%',
                bottom: '3%',
                shape: {
                    width: newSize + 6,
                    height: newSize + 6
                }
            }]
        });
        chart.resize();
        updatePulseSize();
    });

    // 添加显示/隐藏控制
    function toggleNineDashLine(show) {
        chart.setOption({
            graphic: [{
                id: 'nine-dash-line',
                invisible: !show
            }, {
                id: 'nine-dash-border',  // 新增边框元素ID
                invisible: !show        // 同步显示状态
            }]
        });
    }

    // 在脚本最后添加颜色更新逻辑
    document.querySelectorAll('#color-editor input').forEach(input => {
        input.addEventListener('input', (e) => {
            const type = e.target.dataset.color;
            // 转换颜色值为rgba格式（带透明度）
            const rgba = hexToRgba(e.target.value, 0.8);
            AREA_COLORS[type] = rgba;

            // 实时更新地图样式
            chart.setOption({
                series: [{
                    itemStyle: {
                        // areaColor: AREA_COLORS.base,
                        areaColor: {
                            image: './img/map-texture.png', // 直接使用相对路径
                            repeat: 'repeat'
                        },
                        borderColor: AREA_COLORS.border
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: AREA_COLORS.highlight,
                            // areaColor: {
                            //     image: './img/map-texture.png', // 直接使用相对路径
                            //     repeat: 'repeat'
                            // },
                        }
                    }
                }]
            });
        });
    });


    // 在HEX转RGBA函数后添加
    function rgbToHex(rgba) {
        // 提取RGB数值
        const [r, g, b] = rgba.match(/\d+/g).map(Number);
        // 转换为两位十六进制
        return "#" + [r, g, b]
            .map(x => x.toString(16).padStart(2, '0'))
            .join('');
    }


    // HEX转RGBA工具函数
    function hexToRgba(hex, alpha) {
        const r = parseInt(hex.slice(1, 3), 16),
            g = parseInt(hex.slice(3, 5), 16),
            b = parseInt(hex.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }

    // 添加保存功能
    document.getElementById('save-colors').addEventListener('click', async () => {
        // 修复：创建新的纯净配置对象
        const newColors = {
            useSolidColor: useSolidColor,  // 新增模式状态保存
            base: hexToRgba(document.querySelector('[data-color="base"]').value, 0.8),
            highlight: hexToRgba(document.querySelector('[data-color="highlight"]').value, 0.9),
            border: AREA_COLORS.border,  // 保留原有边框色
            gradient: AREA_COLORS.gradient // 保留原有渐变色
        };

        AREA_COLORS = newColors; // 直接替换整个对象
        // 保存时也使用纯净格式
        localStorage.setItem('areaColors', JSON.stringify(newColors));
        console.log(JSON.stringify(AREA_COLORS))


        try {
            const response = await fetch(`${API_BASE}/saveColors`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    colors: AREA_COLORS,
                    timestamp: new Date().getTime()
                })
            });

            if (!response.ok) throw new Error('保存失败');
            const result = await response.json();

            // 修改后的弹窗代码
            const toast = document.createElement('div');
            toast.textContent = result.message || '配色方案已保存到服务器';
            toast.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: ${AREA_COLORS.base};  // 修改为使用基础色    
    color: white;  // 新增对比色计算
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
    animation: fadeOut 3s forwards;
`;
            toast.style.color = AREA_COLORS.highlight;

            // 添加淡出动画
            const style = document.createElement('style');
            style.textContent = `
        @keyframes fadeOut {
            0% { opacity: 1; }
            90% { opacity: 1; }
            100% { opacity: 0; }
        }
    `;
            document.head.appendChild(style);

            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        } catch (error) {
            console.error('保存错误:', error);
            // alert('保存到服务器失败，已保存到本地');
        } finally {
            localStorage.setItem('areaColors', JSON.stringify(AREA_COLORS));
        }
    });
    // 在页面末尾添加切换方法
    function toggleColorMode() {
        useSolidColor = !useSolidColor;
        initMap(currentArea); // 重新初始化当前地图
        // 可以添加UI状态更新代码
    }
</script>


</html>